<template>
  <div>
    <ul class="container">
      <li class="item" v-for="(item,index) in tableData" :key="index">{{ index + 1 }}</li>
      <li class="no-more" v-if="!hasNextPage() && !isLoading">没有更多了</li>
    </ul>
  </div>
</template>

<script setup>
import { articleQuery } from "../api/index";
import { ref } from "vue";
import { throttle } from '../utils/index';
const tableData = ref([]); //表格数据
const pageSize = ref(10); //文章条数
const pageNo = ref(1);
const total = ref(0);
const isLoading = ref(false);

//查询文章信息
const getList = (pageNum) => {
  if(isLoading.value) return;
  isLoading.value = true;
  articleQuery({
    pageNo:pageNum || pageNo.value,
    pageSize:pageSize.value
  }).then((res) => {
    const { list = [],total:count = 0 } = res?.data || {};
    tableData.value = tableData.value.concat(list);
    total.value = count;
  }).finally(()=>{
    isLoading.value= false;
  })
};

// 是否有下一页
const hasNextPage = () => {
  return Math.ceil(total.value / pageSize.value) > pageNo.value;
}

getList();

/* window.addEventListener('scroll',()=>{
  console.log('滚动触发');
  const s_height = document.documentElement.scrollHeight || document.body.scrollHeight;
  const W_Height =  document.documentElement.clientHeight || document.body.clientHeight;
  const sc_height = document.documentElement.scrollTop || document.body.scrollTop;
  console.log('总的高度',s_height,"可视区域高度",W_Height,"卷出高度",sc_height);
  if(sc_height + W_Height > s_height - 100 ){
    if(hasNextPage() && !isLoading.value){
      pageNo.value +=1;
      getList()
    }
  }
}) */

window.addEventListener('scroll',throttle(()=>{
  console.log('滚动触发');
  const s_height = document.documentElement.scrollHeight || document.body.scrollHeight;
  const W_Height =  document.documentElement.clientHeight || document.body.clientHeight;
  const sc_height = document.documentElement.scrollTop || document.body.scrollTop;
  console.log('总的高度',s_height,"可视区域高度",W_Height,"卷出高度",sc_height);
  if(sc_height + W_Height > s_height - 100 ){
    if(hasNextPage() && !isLoading.value){
      pageNo.value +=1;
      getList()
    }
  }
})
)



</script>

<style scoped>
.container{
  background: #fff;
}
li{
  list-style: none;
}
.item{
  width: 200px;
  height: 200px;
  border-radius: 16px;
  margin: 0 auto;
  margin-top: 10px;
  background: skyblue;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color:#fff;
  font-size: 24px;
  box-sizing: border-box;
}

.no-more{
  height: 100px;
  line-height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color:red;
}

</style>
